<template>
  <div class="login-box">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>面经后台运行系统</span>
      </div>
      <el-form ref="formRef" label-width="80px" :model="form" :rules="rules">
        <el-form-item label="用户名" prop="username">
          <!-- <el-input :value="form.username" @input="form.username=$event"></el-input> -->
          <el-input v-model="form.username" @keyup.enter.native="fn"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password"
            type="password"
            ref="pwd"
            @keyup.enter.native="login"
          ></el-input>
        </el-form-item>
        <!-- 1. 会给我们一个loading效果 2. 会禁用按钮的点击事件 -->
        <el-form-item>
          <el-button type="primary" @click="login" :loading="flag"
            >登录</el-button
          >
          <el-button type="default" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { login } from '@/api/user'
// java 新技术
// 只要是pc端 element ui用得最多的
// 1. 多写
// 2. 多看文档
// const form = 200
export default {
  name: 'login-page',
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trggier: 'blur' },
          { min: 5, max: 11, message: '用户名长度5到11之间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trggier: 'blur' },
          {
            pattern: /^[a-z]{5,11}$/,
            message: '密码长度5到11之间',
            trigger: 'blur'
          }
        ]
      },
      flag: false // 默认不在发送ajax中
    }
  },
  methods: {
    async login() {
      // this.login
      // console.log(form);
      // console.log(this.form);
      try {
        //   发送ajax之前校验 找到这个api出处 再放心的写 上班的时候 还可以看别的同事是怎么写 或之前黑马项目怎么写 仿
        //   0功能 你在写布局的时候可能Js怎么写 从来不写笔记
        await this.$refs.formRef.validate()
        // 到了这一行说明校验已经通过了，要开始发送ajax了
        this.flag = true
        // ajax相关的一定要看网络 载荷 预览
        const res = await login(this.form)
        console.log(res)
        this.$store.commit('user/setToken', res.data.token)
        // 1. 把flag-> false 提示登录成功 跳转到后台首页
        this.flag = false
        this.$message.success('登录成功')
        this.$router.push('/')
      } catch (err) {
        console.log(err)
        if (err.response && err.response.status === 400) {
          this.$message.error('用户名或密码不存在')
        } else {
          this.$message.error('出错了')
        }
        this.flag = false
      }
    },
    reset() {
      this.$refs.formRef.resetFields()
    },
    fn() {
      this.$refs.pwd.focus()
    }
  }
}
</script>

<style scoped lang="scss">
$color: #727cf5;
.login-box {
  height: 100vh;
  background: url('@/assets/login-bg.svg') no-repeat center / cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .box-card {
    width: 420px;
  }
  ::v-deep .el-card__header {
    background-color: #727cf5;
    text-align: center;
    color: #fff;
  }

  .el-button:first-child {
    background-color: $color;
  }
}

.el-form-item:last-child {
  text-align: center;
}
</style>
